<template>
  <el-form-item :label="widget.name" :prop="widget.model">
    <template v-if="widget.type == 'input'||widget.type == 'scan'" >
      <el-input
        :type="widget.options.dataType"
        v-model="dataModel"
        :placeholder="widget.options.placeholder"
        :style="{width: widget.options.width}"
        readonly
      ></el-input>
    </template>
    <template v-if="widget.type == 'textarea'">
      <el-input type="textarea" :rows="5"
        v-model="dataModel"
        :placeholder="widget.options.placeholder"
        :style="{width: widget.options.width}"
                readonly
      ></el-input>
    </template>

    <template v-if="widget.type == 'number'">
      <el-input-number
        v-model="widget.options.defaultValue"
        :style="{width: widget.options.width}"
        :step="widget.options.step"
        controls-position="right"
        readonly
      ></el-input-number>
    </template>

    <template v-if="widget.type == 'radio'">
      <!--<el-radio-group v-model="dataModel"-->
        <!--:style="{width: widget.options.width}"-->
      <!--&gt;-->
        <!--<el-radio-->
          <!--:style="{display: widget.options.inline ? 'inline-block' : 'block'}"-->
          <!--:label="item.value" v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="index"-->
          <!--readonly-->
        <!--&gt;-->
          <!--<template v-if="widget.options.remote">{{item.label}}</template>-->
          <!--<template v-else>{{widget.options.showLabel ? item.label : item.value}}</template>-->
        <!--</el-radio>-->
      <!--</el-radio-group>-->
        <el-input
            v-model="dataModel"
            readonly=""></el-input>
    </template>

    <template v-if="widget.type == 'checkbox'">
      <!--<el-checkbox-group v-model="dataModel"-->
        <!--:style="{width: widget.options.width}"-->
      <!--&gt;-->
        <!--<el-checkbox-->
            <!--readonly-->
          <!--:style="{display: widget.options.inline ? 'inline-block' : 'block'}"-->
          <!--:label="item.value" v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="index"-->
        <!--&gt;-->
          <!--<template v-if="widget.options.remote">{{item.label}}</template>-->
          <!--<template v-else>{{widget.options.showLabel ? item.label : item.value}}</template>-->
        <!--</el-checkbox>-->
      <!--</el-checkbox-group>-->
        <el-input
            v-model="dataModel"
            readonly=""></el-input>
    </template>

    <template v-if="widget.type == 'time'">
        <el-input
            v-model="dataModel"
        readonly=""></el-input>
      <!--<el-time-picker-->
        <!--v-model="dataModel"-->
        <!--:is-range="widget.options.isRange"-->
        <!--:placeholder="widget.options.placeholder"-->
        <!--:start-placeholder="widget.options.startPlaceholder"-->
        <!--:end-placeholder="widget.options.endPlaceholder"-->
        <!--:readonly="widget.options.readonly"-->
        <!--:disabled="widget.options.disabled"-->
        <!--:editable="widget.options.editable"-->
        <!--:clearable="widget.options.clearable"-->
        <!--:arrowControl="widget.options.arrowControl"-->
        <!--:value-format="widget.options.format"-->
        <!--:style="{width: widget.options.width}"-->
      <!--&gt;-->
      <!--</el-time-picker>-->
    </template>

    <template v-if="widget.type=='date-time'">
      <!--<el-date-picker-->
              <!--v-model="dataModel"-->
              <!--type="datetime"-->
              <!--:placeholder="widget.options.placeholder"-->
              <!--:start-placeholder="widget.options.startPlaceholder"-->
              <!--:end-placeholder="widget.options.endPlaceholder"-->
              <!--:readonly="widget.options.readonly"-->
              <!--:disabled="widget.options.disabled"-->
              <!--:editable="widget.options.editable"-->
              <!--:clearable="widget.options.clearable"-->
              <!--:value-format="widget.options.timestamp ? 'timestamp' : widget.options.format"-->
              <!--:format="widget.options.format"-->
              <!--:style="{width: widget.options.width}"-->
      <!--&gt;-->
      <!--</el-date-picker>-->
        <el-input
            v-model="dataModel"
            readonly=""></el-input>
    </template>

    <template v-if="widget.type=='date'">
      <!--<el-date-picker-->
        <!--v-model="dataModel"-->
        <!--:type="widget.options.type"-->
        <!--:placeholder="widget.options.placeholder"-->
        <!--:start-placeholder="widget.options.startPlaceholder"-->
        <!--:end-placeholder="widget.options.endPlaceholder"-->
        <!--:readonly="widget.options.readonly"-->
        <!--:disabled="widget.options.disabled"-->
        <!--:editable="widget.options.editable"-->
        <!--:clearable="widget.options.clearable"-->
        <!--:value-format="widget.options.timestamp ? 'timestamp' : widget.options.format"-->
        <!--:format="widget.options.format"-->
        <!--:style="{width: widget.options.width}"-->
      <!--&gt;-->
      <!--</el-date-picker>-->
        <el-input
            v-model="dataModel"
            readonly=""></el-input>
    </template>

    <template v-if="widget.type =='rate'">
      <el-rate v-model="dataModel"
        :max="widget.options.max"
        :disabled="widget.options.disabled"
        :allow-half="widget.options.allowHalf"
      ></el-rate>
    </template>

    <template v-if="widget.type == 'color'">
      <!--<el-color-picker-->
        <!--v-model="dataModel"-->
        <!--:disabled="widget.options.disabled"-->
        <!--:show-alpha="widget.options.showAlpha"-->
      <!--&gt;</el-color-picker>-->
        <el-input
            v-model="dataModel"
            readonly=""></el-input>
    </template>

    <template v-if="widget.type == 'select'">
      <!--<el-select-->
        <!--v-model="dataModel"-->
        <!--:disabled="widget.options.disabled"-->
        <!--:multiple="widget.options.multiple"-->
        <!--:clearable="widget.options.clearable"-->
        <!--:placeholder="widget.options.placeholder"-->
        <!--:style="{width: widget.options.width}"-->
      <!--&gt;-->
        <!--<el-option v-for="item in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="item.value" :value="item.value" :label="widget.options.showLabel || widget.options.remote?item.label:item.value"></el-option>-->
      <!--</el-select>-->
        <el-input
            v-model="dataModel"
            readonly=""></el-input>
    </template>

    <template v-if="widget.type=='switch'">
      <el-switch
        v-model="dataModel"
        :disabled="widget.options.disabled"
      >
      </el-switch>
    </template>

    <template v-if="widget.type=='slider'">
      <el-slider
        v-model="dataModel"
        :min="widget.options.min"
        :max="widget.options.max"
        :disabled="widget.options.disabled"
        :step="widget.options.step"
        :show-input="widget.options.showInput"
        :range="widget.options.range"
        :style="{width: widget.options.width}"
      ></el-slider>
    </template>

    <template v-if="widget.type=='imgupload'">
      <!--<fm-upload-->
        <!--v-model="dataModel"-->
        <!--:disabled="widget.options.disabled"-->
        <!--:style="{'width': widget.options.width}"-->
        <!--:width="widget.options.size.width"-->
        <!--:height="widget.options.size.height"-->
        <!--:token="widget.options.token"-->
        <!--:domain="widget.options.domain"-->
      <!--&gt;-->
      <!--</fm-upload>-->
        <div id="images" class="avatar-uploader">
            <img v-for="img in dataModel" :src="img.url" class="avatar" @click="preview">
        </div>
    </template>
      <template v-if="widget.type=='split-line'">
          <!--<label>{{widget.options.defaultValue}}</label>-->
          <hr align="center" size="1"/>
      </template>
      <template v-if="widget.type=='address'">
          <el-cascader
              :options="widget.options.options"
              v-model="widget.options.defaultValue"
              :width="widget.options.width"
              :clearable="widget.options.clearable"
          >
          </el-cascader>
      </template>
      <template v-if="widget.type=='location'">
          <!--<el-row>-->
              <!--<el-col :span="4">-->
                  <!--<el-button @click="getDelegate(widget.options.delegate, $event)">获取当前位置</el-button>-->
              <!--</el-col>-->
            <!--<el-col :span="20">-->
              <!--<el-tag v-if="widget.options.callbackData.length > 0">{{widget.options.callbackData[0].label}}</el-tag>-->
              <!--&lt;!&ndash;<el-input v-model="widget.options.callbackData[0].label" :disabled="true"></el-input>&ndash;&gt;-->
            <!--</el-col>-->
          <!--</el-row>-->
          <!--<span style="color: #909399;font-size: small">请在移动端打开表单获取位置信息</span>-->
          <el-input
              v-model="dataModel.address"
              readonly=""></el-input>
      </template>
      <template v-if="widget.type=='serial-no'">
          <el-input
              placeholder="自动生成无需填写"
              :value="widget.options.remote ? widget.options.remoteOptions[0].value : widget.options.options[0].value"
              :disabled="true">
          </el-input>
      </template>
      <template v-if="widget.type=='phone'">
          <el-input v-model="dataModel" placeholder="请输入手机号" suffix-icon="el-icon-mobile-phone" readonly></el-input>
      </template>
      <template v-if="widget.type=='member-single' || widget.type=='dept-single'">
        <!--<el-row>-->
          <!--<el-col :span="4">-->
            <!--<el-button @click="getDelegate(widget.options.delegate)">点击选择成员</el-button>-->
          <!--</el-col>-->
          <!--<el-col :span="20">-->
            <!--<el-tag v-if="widget.options.callbackData.length > 0">{{widget.options.callbackData[0].label}}</el-tag>-->
            <!--&lt;!&ndash;<el-input v-model="widget.options.callbackData[0].label" :disabled="true"></el-input>&ndash;&gt;-->
          <!--</el-col>-->
        <!--</el-row>-->
          <el-input
              v-model="dataModel"
              readonly=""></el-input>
      </template>
      <template v-if="widget.type=='member-multi' || widget.type=='dept-multi'">
        <!--<el-button @click="getDelegate(widget.options.delegate)">点击选择成员</el-button>-->
        <!--<div style="display: block; padding: 5px; border: 1px solid #ebebeb; min-height: 35px; margin-top: 10px">-->
          <!--<el-tag-->
                  <!--style="margin-left: 10px"-->
                  <!--v-for="tag in widget.options.callbackData"-->
                  <!--:key="tag.value">-->
            <!--{{tag.label}}-->
          <!--</el-tag>-->
        <!--</div>-->
          <el-input
              v-model="dataModel"
              readonly=""></el-input>
      </template>

  </el-form-item>
</template>

<script>
    import Viewer from 'viewerjs'
    require('viewerjs/dist/viewer.css')

export default {

  props: ['widget', 'models', 'rules', 'remote', 'delegate'],
  /*components: {
    FmUpload
  },*/
  data () {
    return {
      dataModel: this.models[this.widget.model]
    }
  },
  created () {
    if (this.widget.options.remote && this.remote[this.widget.options.remoteFunc]) {
      this.remote[this.widget.options.remoteFunc]((data) => {
        this.widget.options.remoteOptions = data.map(item => {
          return {
            value: item[this.widget.options.props.value],
            label: item[this.widget.options.props.label]
          }
        })
      })
    }

    if (this.widget.type === 'imgupload') {
      this.remote[this.widget.options.tokenFunc]((data) => {
        this.widget.options.token = data
      })
    }
  },
    methods: {
      getDelegate: function (delegateName, event) {
          console.log(event)
          if (this.delegate && this.delegate[delegateName]) {
              this.delegate[delegateName]((data) => {
                  if (data instanceof Object) {
                      this.widget.options.defaultValue = data['value']
                      this.widget.options.callbackData = [data]
                  }
                  if (data instanceof Array) {
                      this.widget.options.callbackData = data
                      this.widget.options.defaultValue = data.length > 0 ? data[0].value : this.widget.options.defaultValue
                  }
                  console.log('请返回包含lable和value的Object或Array')
              })
              return this.delegate[delegateName]
          }
          console.log('请设置代理事件')
      },
        preview: function () {
            new Viewer(document.getElementById('images'))
        }
    },
  watch: {
    dataModel: {
      deep: true,
      handler (val) {
        this.models[this.widget.model] = val
        this.$emit('update:models', {
          ...this.models,
          [this.widget.model]: val
        })
      }
    },
    models: {
      deep: true,
      handler (val) {
        console.log('--------')
        this.dataModel = val[this.widget.model]
      }
    }

  }
}
</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
